<template>
	<view class="page">

		<u-skeleton rows="2" rowsHeight="150" :rowsWidth="['100%','100%']" :loading="loading" :title="false">
			<view>
				<view class="top_box" :style="colorStyle">

				</view>

				<view>
					<u-swiper :list="list1" :circular="true"></u-swiper>
				</view>

			</view>
		</u-skeleton>



		<u-loadmore :status="status" line :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" />


		<button @click="onChangeTheem()">切换主题</button>

		<!-- <skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
			bgcolor="#fff"></skeleton> -->




		<u-no-network @disconnected="disconnected" @connected="connected" @retry="retry"></u-no-network>

		<button @click="onCate()">分类</button>

	</view>
</template>

<script>
	let green =
		'--view-theme: rgba(66,202,77,1);--view-theme-16: #42CA4D;--view-priceColor:#FF7600;--view-minorColor:rgba(108, 198, 94, 0.5);--view-minorColorT:rgba(66, 202, 77, 0.1);--view-bntColor:#FE960F;--view-op-ten: rgba(66,202,77, 0.1);--view-main-start:#70E038; --view-main-over:#42CA4D;--view-op-point-four: rgba(66,202,77, 0.04);'
	let red =
		'--view-theme: rgba(233,51,35,1);--view-theme-16: #e93323;--view-priceColor:#e93323;--view-minorColor:rgba(233, 51, 35, 0.5);--view-minorColorT:rgba(233, 51, 35, 0.1);--view-bntColor:#FE960F;--view-op-ten: rgba(233,51,35, 0.1);--view-main-start:#FF6151; --view-main-over:#e93323;--view-op-point-four: rgba(233,51,35, 0.04);'
	let blue =
		'--view-theme: rgba(29,176,252,1);--view-theme-16:#1db0fc;--view-priceColor:#FD502F;--view-minorColor:rgba(58, 139, 236, 0.5);--view-minorColorT:rgba(9, 139, 243, 0.1);--view-bntColor:#22CAFD;--view-op-ten: rgba(29,176,252, 0.1);--view-main-start:#40D1F4; --view-main-over:#1DB0FC;--view-op-point-four: rgba(29,176,252, 0.04);'
	let pink =
		'--view-theme: rgba(255,68,143,1);--view-theme-16:#ff448f;--view-priceColor:#FF448F;--view-minorColor:rgba(255, 68, 143, 0.5);--view-minorColorT:rgba(255, 68, 143, 0.1);--view-bntColor:#282828;--view-op-ten: rgba(255,68,143, 0.1);--view-main-start:#FF67AD; --view-main-over:#FF448F;--view-op-point-four: rgba(255,68,143, 0.04);'
	let orange =
		'--view-theme: rgba(254,92,45,1); --view-theme-16:#FE5C2D;--view-priceColor:#FE5C2D;--view-minorColor:rgba(254, 92, 45, 0.5);--view-minorColorT:rgba(254, 92, 45, 0.1);--view-bntColor:#FDB000;--view-op-ten: rgba(254,92,45, 0.1);--view-main-start:#FF9445; --view-main-over:#FE5C2D;--view-op-point-four: rgba(254,92,45, 0.04);'
	import skeleton from "@/components/skeleton/skeleton.vue"
	export default {
		components: {
			skeleton
		},
		data() {
			return {
				title: 'Hello',
				loading: true,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				status: 'loading',
				loadingText: '正在加载...',
				loadmoreText: '轻轻上拉',
				nomoreText: '没有更多数据了',
				colorStyle: '',
				type: 1,
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0,
			}
		},
		onLoad() {

			setTimeout(() => {
				this.isNodes++;
			}, 0);


			uni.$u.sleep(2000).then(() => {
				this.loading = false;
				this.status = "nomore"
				this.showSkeleton = false;
			})

			this.colorStyle = red;


		},
		methods: {
			disconnected() {
				console.log('disconnected');
			},
			connected() {
				console.log('connected');
			},
			retry() {
				console.log('retry');
			},
			/**
			 * 切换主题
			 */
			onChangeTheem() {
				this.type = this.type == 1 ? 2 : 1;
				if (this.type == 1) {
					this.colorStyle = red;

					uni.setTabBarStyle({
						selectedColor: "#e93323"
					})
					uni.setNavigationBarColor({
						frontColor: "#ffffff",
						backgroundColor: "#e93323"
					})
					uni.setTabBarItem({
						"index": 0,
						"selectedIconPath": "static/home_icon.png",
					})
				} else {
					this.colorStyle = green;

					uni.setNavigationBarColor({
						frontColor: "#ffffff",
						backgroundColor: "#42CA4D"
					})

					uni.setTabBarStyle({
						selectedColor: "#42CA4D"
					})

					uni.setTabBarItem({
						"index": 0,
						"selectedIconPath": "static/home_green_icon.png",
					})

				}
			},
			onCate() {
				uni.navigateTo({
					url: "/pages/cate/cate"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 30rpx;
	}

	.user_head {
		width: 100rpx;
		height: 100rpx;
	}

	.rect_box {
		width: 100%;
		height: 50rpx;
	}

	.top_box {
		height: 300rpx;
		background-color: var(--view-theme);
		margin-bottom: 30rpx;
	}

	.list {
		display: flex;
		flex-direction: row;
	}
</style>
